import { useEffect, useState } from "react";
import { EditableProTable } from "@ant-design/pro-components";
import { InputNumber, Cascader } from "antd";
import { fetchCityList } from "@/api/admin";

export default ({
  name = "carryModeS", // 配送区域及运费
  valuationModel = 0, // 0=按件数 1=按重量 2=按体积
  value = [],
  onChange,
}) => {
  const [editableKeys, setEditableRowKeys] = useState(
    value.map((item) => item.id)
  );

  useEffect(() => {
    setEditableRowKeys(value.map((item) => item.id));
  },[value])
  
  const [cityList, setCityList] = useState([]);
  const getCityList = async () => {
    const res = await fetchCityList();
    setCityList(res.data);
  };

  useEffect(() => {
    getCityList();
  }, []);


  const regionColumn = {
    title: "可配送区域",
    dataIndex: "region",
    renderFormItem: (_, { record }) => {
      console.log("record===",record);
      return record.region == "ALL" ? (
        "默认全国"
      ) : (
        <Cascader
          multiple
          showCheckedStrategy={Cascader.SHOW_CHILD}
          options={cityList}
          style={{ width: "100%" }}
          placeholder="请选择配送区域"
          maxTagCount="responsive"
          fieldNames={{
            label: "name",
            value: "code",
            children: "children",
          }}
        />
      );
    },
    formItemProps: (form, { rowIndex }) => {
      return {
        rules: [{ required: true, message: "此项为必填项" }],
      };
    },
    width: "20%",
  };


  const action = {
    title: "操作",
    valueType: "option",
    width: 100,
    render: (text, record, rowIndex, action) => {
      return (
        <>
          <a
            key="editable"
            onClick={() => {
              action?.startEditable?.(record.id);
            }}
          >
            编辑
          </a>
          {rowIndex === 0 ? null : (
            <a
              key="delete"
              onClick={() => {
                onChange(value.filter((item) => item.id !== record.id));
              }}
            >
              删除
            </a>
          )}
        </>
      );
    },
  };

  const columnsMaps = {
    0: [
      regionColumn,
      {
        title: "首件",
        dataIndex: "firstPiece",
        renderFormItem: () => {
          return (
            <InputNumber
              style={{ width: "100%" }}
              placeholder="请输入"
              precision={0}
              min={0}
            />
          );
        },
        formItemProps: (form, { rowIndex }) => {
          return {
            rules: [{ required: true, message: "此项为必填项" }],
          };
        },
        width: "20%",
      },
      {
        title: "运费（元）",
        dataIndex: "firstPrice",
        renderFormItem: () => {
          return (
            <InputNumber
              style={{ width: "100%" }}
              placeholder="请输入"
              precision={2}
              min={0}
            />
          );
        },
        formItemProps: (form, { rowIndex }) => {
          return {
            rules: [{ required: true, message: "此项为必填项" }],
          };
        },
        width: "20%",
      },

      {
        title: "续件",
        dataIndex: "secondPiece",
        renderFormItem: () => {
          return (
            <InputNumber
              style={{ width: "100%" }}
              placeholder="请输入"
              precision={0}
              min={0}
            />
          );
        },
        formItemProps: (form, { rowIndex }) => {
          return {
            rules: [{ required: true, message: "此项为必填项" }],
          };
        },
        width: "20%",
      },

      {
        title: "续费（元）",
        dataIndex: "secondPrice",
        renderFormItem: () => {
          return (
            <InputNumber
              style={{ width: "100%" }}
              placeholder="请输入"
              precision={2}
              min={0}
            />
          );
        },
        formItemProps: (form, { rowIndex }) => {
          return {
            rules: [{ required: true, message: "此项为必填项" }],
          };
        },
        width: "20%",
      },
      action,
    ],
    1: [
      regionColumn,
      {
        title: "首件重量（kg）",
        dataIndex: "firstWeight",
        renderFormItem: () => {
          return (
            <InputNumber
              style={{ width: "100%" }}
              placeholder="请输入"
              precision={0}
              min={0}
            />
          );
        },
        formItemProps: (form, { rowIndex }) => {
          return {
            rules: [{ required: true, message: "此项为必填项" }],
          };
        },
        width: "20%",
      },
      {
        title: "运费（元）",
        dataIndex: "firstPrice",
        renderFormItem: () => {
          return (
            <InputNumber
              style={{ width: "100%" }}
              placeholder="请输入"
              precision={2}
              min={0}
            />
          );
        },
        formItemProps: (form, { rowIndex }) => {
          return {
            rules: [{ required: true, message: "此项为必填项" }],
          };
        },
        width: "20%",
      },

      {
        title: "续件重量（kg）",
        dataIndex: "secondWeight",
        renderFormItem: () => {
          return (
            <InputNumber
              style={{ width: "100%" }}
              placeholder="请输入"
              precision={0}
              min={0}
            />
          );
        },
        formItemProps: (form, { rowIndex }) => {
          return {
            rules: [{ required: true, message: "此项为必填项" }],
          };
        },
        width: "20%",
      },

      {
        title: "续费（元）",
        dataIndex: "secondPrice",
        renderFormItem: () => {
          return (
            <InputNumber
              style={{ width: "100%" }}
              placeholder="请输入"
              precision={2}
              min={0}
            />
          );
        },
        formItemProps: (form, { rowIndex }) => {
          return {
            rules: [{ required: true, message: "此项为必填项" }],
          };
        },
        width: "20%",
      },
      action,
    ],
    2: [
      regionColumn,
      {
        title: "首件体积（m³）",
        dataIndex: "firstBulk",
        renderFormItem: () => {
          return (
            <InputNumber
              style={{ width: "100%" }}
              placeholder="请输入"
              precision={0}
              min={0}
            />
          );
        },
        formItemProps: (form, { rowIndex }) => {
          return {
            rules: [{ required: true, message: "此项为必填项" }],
          };
        },
        width: "20%",
      },
      {
        title: "运费（元）",
        dataIndex: "firstPrice",
        renderFormItem: () => {
          return (
            <InputNumber
              style={{ width: "100%" }}
              placeholder="请输入"
              precision={2}
              min={0}
            />
          );
        },
        formItemProps: (form, { rowIndex }) => {
          return {
            rules: [{ required: true, message: "此项为必填项" }],
          };
        },
        width: "20%",
      },

      {
        title: "续件体积（m³）",
        dataIndex: "secondBulk",
        renderFormItem: () => {
          return (
            <InputNumber
              style={{ width: "100%" }}
              placeholder="请输入"
              precision={0}
              min={0}
            />
          );
        },
        formItemProps: (form, { rowIndex }) => {
          return {
            rules: [{ required: true, message: "此项为必填项" }],
          };
        },
        width: "20%",
      },

      {
        title: "续费（元）",
        dataIndex: "secondPrice",
        renderFormItem: () => {
          return (
            <InputNumber
              style={{ width: "100%" }}
              placeholder="请输入"
              precision={2}
              min={0}
            />
          );
        },
        formItemProps: (form, { rowIndex }) => {
          return {
            rules: [{ required: true, message: "此项为必填项" }],
          };
        },
        width: "20%",
      },

      action,
    ],
  };

  return (
    <EditableProTable
      name={name}
      rowKey="id"
      recordCreatorProps={{
        position: "bottom",
        record: () => ({ id: Math.random().toString() }),
        creatorButtonText: "新增一行",
      }}
      loading={false}
      columns={columnsMaps[valuationModel]}
      value={value}
      onChange={onChange}
      editable={{
        type: "multiple",
        editableKeys,
        onValuesChange: (record, recordList) => {
          onChange(recordList);
        },
        onChange: setEditableRowKeys,
        actionRender: (row, config, defaultDom) => {
          return config.index === 0 ? [] : [defaultDom.delete];
        },
      }}
    />
  );
};
